<template>
  <Container>
    <Tabs v-model="tab">
      <Button size="large" class="item" slot="extra" icon="md-add" type="primary" @click="onEdit(null, 'add')">新增角色</Button>
      <TabPane label="业务通角色设置" name="tab1">
        <homeTable
          :list="list"
          :hasPage="false"
          @getData="getData"/>
          <div class="pager">
            <Page
              :total="list.total"
              :current="list.current"
              :page-size="list.pageSize"
              @on-change="onPageChange"
              @on-page-size-change="onPageSizeChange"
              show-sizer
              placement="top"
            ></Page>
          </div>
      </TabPane>
    </Tabs>
    <RoleEditItem ref="edit" @complete="getData"></RoleEditItem>
  </Container>
</template>
<script>
import homeTable from '~/homeTable'
import RoleListData from './list/RoleListData'
import RoleEditItem from './list/RoleEditItem'
export default {
  components: {
    homeTable,
    RoleEditItem
  },
  data() {
    return {
      tab: 'tab1',
      list: RoleListData
    }
  },
  mounted() {
    this.list.current = ~~this.$route.query.current || 1
    this.list.pageSize = ~~this.$route.query.size || this.list.pageSize
    this.getData()
    this.$bus.$on('onEdit', id => this.onEdit(id, 'edit'))
    this.$bus.$on('onCheck', id => this.onEdit(id, 'check'))
  },
  methods: {
    getData() {
      const param = {
        current: this.list.current,
        size: this.list.pageSize
      }
      this.$ajaxGet('/salesman/role/page', param).then(res => {
        const roleTypeMap = {
          'DISTRIBUTOR': '经销商',
          'SUPPLIER': '供应商'
        }
        const roleManageTypeMap = {
          'STORE': '门店维护人',
          'DISTRIBUTOR': '经销商'
        }
        res.records.map(item => {
          item.roleTypeStr = roleTypeMap[item.roleType]
          item.roleManageTypeStr = roleManageTypeMap[item.roleManageType]
        })
        this.list.data = res.records || []
        this.list.total = res.total
        this.list.status = 'pass'
      }).catch(() => {
        this.list.status = 'error'
      })
    },
    onEdit(id, type) {
      this.$refs.edit.open(id, type)
    },
    onPageChange (number) {
      this.list.current = number
      this.$router.push({
        name: 'setting/ywt/role/list',
        query: {
          current: this.list.current,
          size: this.list.pageSize
        }
      })
      this.getData()
    },
    onPageSizeChange (pageSize) {
      this.list.current = 1
      this.list.pageSize = pageSize
      this.$router.push({
        name: 'setting/ywt/role/list',
        query: {
          current: this.list.current,
          size: this.list.pageSize
        }
      })
      this.getData()
    }
  },
  watch: {
    $route($route) {
      let page = ~~this.$route.query.current
      let table = this.list
      if (table.current !== page) {
        table.current =
          ~~this.$route.query.current === 0
            ? 1
            : ~~this.$route.query.current
        this.getData()
      }
    }
  },
  destroyed() {
    this.$bus.$off()
  }
}
</script>